<template>
  <div>
    <!-- <!-- Logo图表显示 -->
    <!-- <el-row type="flex" align="middle"><img style="width: 100px; height: 100px" src="@/assets/logo.png" />
    这里仅显示图表，可以根据需要布局首页内容</el-row> -->
    <!-- 分割线  商品分类销售统计-->
    <!-- <el-divider></el-divider>
    <order-sum-by-family-echar></order-sum-by-family-echar>
 -->
    <!-- 分割线  XX年商品月度销售统计-->
    <!-- <el-divider></el-divider>
    <order-month-echar></order-month-echar> -->
    <el-row style="width: 98%;margin-left: 1%;margin-top: 1%;">
      <el-col :span="8">
        <el-card class="box-card" style="height: 18rem;margin-right: 15px;">
          <div class="user">
            <img src="@/assets/img/touxiang.png" alt="">
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登陆地点: <span>宁波</span></p>
            <p>上次登陆方式: <span>账号密码登录</span></p>
          </div>
        </el-card>
        <el-card class="box-card" style="height: 24.5rem;margin-bottom: 15px;margin-right: 15px;">
          <el-table :data="tableData" style="width: 100%" height="48rem">
            <el-table-column prop="name" label="类别">
            </el-table-column>
            <el-table-column prop="todayBuy" label="今日购买">
            </el-table-column>
            <el-table-column prop="monthBuy" label="本月购买">
            </el-table-column>
            <el-table-column prop="totalBuy" label="总购买">
            </el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card" style="height: 24.5rem;margin-bottom: 15px;margin-right: 15px;">
          <el-table :data="tableData1" style="width: 100%" height="48rem">
            <el-table-column prop="name" label="类别">
            </el-table-column>
            <el-table-column prop="todayBuy" label="今日评论">
            </el-table-column>
            <el-table-column prop="monthBuy" label="本月评论">
            </el-table-column>
            <el-table-column prop="totalBuy" label="总评论">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <div class="num">
          <el-card v-for="item in countData" :key="item.name" body-style="display:flex; padding: 0;">
            <i class="icon" :class="`el-icon-${item.icon}`" :style="`background-color: ${item.color}`"></i>
            <div class="detail">
              <div class="number">{{item.value}}</div>
              <div class="desc">{{item.name}}</div>
            </div>
          </el-card>
        </div>
        <el-card class="box-card">
          <order-month-echar></order-month-echar>
        </el-card>
        <el-col :span="12">
          <el-card class="box-card" style="margin-right: 15px;">
            <order-sum-by-family-echar></order-sum-by-family-echar>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card">
            <collection-echar></collection-echar>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import OrderSumByFamilyEchar from './components/OrderSumByFamilyEchar.vue';
  import OrderMonthEchar from './components/OrderMonthEchar.vue';
  import CollectionEchar from './components/CollectionEchar.vue';
  export default {
    name: 'home',
    components: {
      OrderSumByFamilyEchar,
      OrderMonthEchar,
      CollectionEchar
    },
    data() {
      return {
        tableData: [{
            name: '角色扮演',
            todayBuy: '400',
            monthBuy: '5000',
            totalBuy: '22000'
          },
          {
            name: '休闲益智',
            todayBuy: '350',
            monthBuy: '4800',
            totalBuy: '18000'
          },
          {
            name: '经营策略',
            todayBuy: '420',
            monthBuy: '4400',
            totalBuy: '25000'
          },
          {
            name: '体育竞速',
            todayBuy: '320',
            monthBuy: '3000',
            totalBuy: '16000'
          },
          {
            name: '动作射击',
            todayBuy: '440',
            monthBuy: '4600',
            totalBuy: '27000'
          },
          {
            name: '全部',
            todayBuy: '1930',
            monthBuy: '21800',
            totalBuy: '108000'
          },
        ],
        tableData1: [{
            name: '角色扮演',
            todayBuy: '200',
            monthBuy: '1600',
            totalBuy: '6500'
          },
          {
            name: '休闲益智',
            todayBuy: '175',
            monthBuy: '1350',
            totalBuy: '5600'
          },
          {
            name: '经营策略',
            todayBuy: '160',
            monthBuy: '1150',
            totalBuy: '4800'
          },
          {
            name: '体育竞速',
            todayBuy: '145',
            monthBuy: '1000',
            totalBuy: '3800'
          },
          {
            name: '动作射击',
            todayBuy: '190',
            monthBuy: '1500',
            totalBuy: '6000'
          },
          {
            name: '全部',
            todayBuy: '870',
            monthBuy: '6600',
            totalBuy: '26700'
          },
        ],
        countData: [{
            name: "今日购买",
            value: "1930",
            icon: "success",
            color: "#01CBE2"
          },
          {
            name: "今日收藏",
            value: "640",
            icon: "star-on",
            color: "#f4d800"
          },
          {
            name: "今日评论",
            value: "870",
            icon: "s-comment",
            color: "#09a0e6"
          },
          {
            name: "本月购买",
            value: "21800",
            icon: "success",
            color: "#01CBE2"
          },
          {
            name: "本月收藏",
            value: "4200",
            icon: "star-on",
            color: "#f4d800"
          },
          {
            name: "本月评论",
            value: "6600",
            icon: "s-comment",
            color: "#09a0e6"
          },
        ]

      };
    },
    methods: {}
  };
</script>

<style lang="scss" scoped>
  .box-card {
    margin-bottom: 15px;
  }

  .user {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;

    img {
      margin-right: 40px;
      width: 150px;
      height: 150px;
      border-radius: 50%;
    }
  }

  .userinfo {

    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }
  }

  .login-info {
    p {
      line-height: 28px;
      font-size: 14px;
      color: #999999;

      span {
        color: #666666;
        margin-left: 60px;
      }
    }

  }

  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .icon {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }

    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .number {
        font-size: 30px;
        margin-bottom: 10px;
        line-height: 30px;
        height: 30px;
      }

      .desc {
        font-size: 14px;
        color: #999;
        text-align: center;
      }
    }

    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }
  }
</style>
